import React from 'react';
import { Skeleton, Row, Col, Card, Avatar, Tag, Icon, Divider } from 'antd';
import styles from './index.less';

const RecordCard = props => {
    const { record = {}, loading = false, result = '' } = props;
    const title = (name, role, finishTime) => (
        <div className={styles.title}>
            <div>
                <span className={styles.recordName}>{name}</span>
                {role ? <Tag>{role}</Tag> : null}
            </div>
            <div className={styles.finishTime}>{finishTime}</div>
        </div>
    );
    const getState = (num, type) => {
        if (num === 0) {
            return '待发起';
        }
        if (num === 1 || num === 4) {
            return <span style={{ color: 'red' }}>待估算</span>;
        }
        if (num === -1) {
            return <div>重估申请</div>;
        }

        if (num === 3 && type !== 'index') {
            return '重估回复';
        }
        return '';
    };
    // 这里放的是重估详情的细节部分
    const renderContent = (comment, fileList, estimationValue) => (
        <>
            {estimationValue ? <div>工作量：{estimationValue}</div> : null}
            <div className={styles.comment}>{comment}</div>
            <div className={styles.attachFile}>
                {fileList.map(item => (
                    <div>
                        <a download href={item.url} target="_blank" rel="noopener noreferrer" title={item.originName}>
                            <span className={styles.fileName}>{item.originName}</span> <Icon type="download" />
                        </a>
                    </div>
                ))}
            </div>
        </>
    );
    // 根据类别返回不同的附件内容
    const getFiles = item => {
        if (item.estimationState === -1) {
            return item.taskReEstimationFile;
        }
        return item.taskEstimationFile;
    };
    // 估算人员重估详情部分
    const renderReEstimationDetails = () =>
        record.reEstimationDetails.map((item, index) => (
            <React.Fragment>
                {getState(item.estimationState) === '重估回复' || index === 0 ? null : <Divider />}
                <div style={{ position: 'relative' }}>
                    {item.estimationState ? (
                        <div className={styles.estimationState}>{getState(item.estimationState)}</div>
                    ) : null}
                    <Card.Meta
                        className={styles.detailMeta}
                        avatar={<Avatar src={item.avatarFile} size={18} />}
                        title={title(item.employeeName, item.roleName, item.finishTime)}
                        description={renderContent(item.content, getFiles(item), item.estimationValue)}
                    />
                </div>
            </React.Fragment>
        ));
    // 估算人员的详情展示
    const renderDescription = (comment, fileList, estimationValue) => (
        <>
            {estimationValue ? <div>工作量：{estimationValue}</div> : null}
            <div className={styles.comment}>{comment}</div>
            <div className={styles.attachFile}>
                {fileList.map(item => (
                    <div>
                        <a download href={item.url} target="_blank" rel="noopener noreferrer" title={item.originName}>
                            <span className={styles.fileName}>{item.originName}</span> <Icon type="download" />
                        </a>
                    </div>
                ))}
            </div>
            {record.estimationState ? <div>{getState(record.estimationState, 'index')}</div> : null}
            {record.reEstimationDetails ? renderReEstimationDetails() : null}
        </>
    );
    return (
        <Skeleton loading={loading} avatar active>
            <Row className={styles.recordCard} type="flex" align="middle">
                <Col className={styles.content} span={16}>
                    {/* <div className={styles.recordTime}>{}</div> */}
                    <Card.Meta
                        avatar={<Avatar src={record.avatarFile} size={24} />}
                        title={title(record.employeeName, record.roleName, record.finishTime)}
                        description={renderDescription(
                            record.content,
                            record.taskEstimationFile || [],
                            record.estimationValue
                        )}
                    />
                </Col>
                <Col span={8} className={styles.result}>
                    {result}
                </Col>
            </Row>
        </Skeleton>
    );
};

export default RecordCard;
